

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:oral_cloud/config/resource_mananger.dart';
import 'package:oral_cloud/generated/l10n.dart';

class LoginTextField extends StatefulWidget{
  final String label;
  final IconData icon;
  final bool obscureText;
  final TextEditingController controller;
  final FormFieldValidator<String> validator;
  final FocusNode focusNode;
  final TextInputAction textInputAction;
  final ValueChanged<String> onFieldSubmited;



  LoginTextField({
    this.label,
    this.icon,
    this.obscureText,
    this.controller,
    this.validator,
    this.focusNode,
    this.textInputAction,
    this.onFieldSubmited});


  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _LoginTextFieldState();
  }

}

class _LoginTextFieldState extends State<LoginTextField>{
  TextEditingController controller;
  ValueNotifier<bool> obscureNotifier;

  @override
  void initState() {
    controller=widget.controller??TextEditingController();
    obscureNotifier=ValueNotifier(widget.obscureText);
    super.initState();
  }

  @override
  void dispose() {
    obscureNotifier.dispose();
    if(widget.controller==null)
      controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8,vertical: 4),
      child: ValueListenableBuilder(
        valueListenable: obscureNotifier,
        builder: (context,value,child)=>TextFormField(
          controller: controller,
          obscureText: value,
          validator: (text){
            var validator=widget.validator??(_) => null;
            return text.trim().length>0?
                validator(text):S.of(context).fieldNotNull;
          },
          focusNode: widget.focusNode,
          textInputAction: widget.textInputAction,
          onFieldSubmitted: widget.onFieldSubmited,
          decoration: InputDecoration(
            prefixIcon:Icon(widget.icon,color: theme.accentColor,size: 22,),
            hintText: widget.label,
            hintStyle: TextStyle(fontSize: 16),
            suffixIcon: LoginTextFieldSuffixIcon(
              controller: controller,
              obscureText: widget.obscureText,
              obscureNotifier: obscureNotifier,
            ),
          ),
        ),
      ),
    );
  }
  
}

class LoginTextFieldSuffixIcon extends StatelessWidget {
  final TextEditingController controller;

  final ValueNotifier<bool> obscureNotifier;

  final bool obscureText;

  LoginTextFieldSuffixIcon(
      {this.controller, this.obscureNotifier, this.obscureText});

  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    return Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.end,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Offstage(
          offstage: !obscureText,
          child: InkWell(
            onTap: () {
//              debugPrint('onTap');
              obscureNotifier.value = !obscureNotifier.value;
            },
            child: ValueListenableBuilder(
              valueListenable: obscureNotifier,
              builder: (context, value, child) => Image.asset(
                value
                    ? ImageHelper.wrapAssets('eye_closed.png')
                    : ImageHelper.wrapAssets('eye_open.png'),
                width: 18.0,
                height: 18.0,
              )
            ),
          ),
        ),
        LoginTextFieldClearIcon(controller)
      ],
    );
  }
}

class LoginTextFieldClearIcon extends StatefulWidget {
  final TextEditingController controller;

  LoginTextFieldClearIcon(this.controller);

  @override
  _LoginTextFieldClearIconState createState() =>
      _LoginTextFieldClearIconState();
}
class _LoginTextFieldClearIconState extends State<LoginTextFieldClearIcon> {
  ValueNotifier<bool> notifier;

  @override
  void initState() {
    notifier = ValueNotifier(widget.controller.text.isEmpty);
    widget.controller.addListener(() {
      if(mounted) notifier.value = widget.controller.text.isEmpty;
    });
    super.initState();
  }

  @override
  void dispose() {
    notifier.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return ValueListenableBuilder(
      valueListenable: notifier,
      builder: (context, bool value, child) {
        return Offstage(
          offstage: value,
          child: child,
        );
      },
      child: InkWell(
          onTap: () {
            WidgetsBinding.instance.addPostFrameCallback((_) {
              widget.controller.clear();
            });
          },
          child: Icon(CupertinoIcons.clear,
              size: 30, color: Theme.of(context).hintColor)),
    );
  }
}


class LoginVerticationCodeWidget extends StatefulWidget{
  final String label;
  final IconData icon;
  final bool obscureText;
  final TextEditingController controller;
  final FormFieldValidator<String> validator;
  final FocusNode focusNode;
  final TextInputAction textInputAction;
  final ValueChanged<String> onFieldSubmited;



  LoginVerticationCodeWidget({
    this.label,
    this.icon,
    this.obscureText,
    this.controller,
    this.validator,
    this.focusNode,
    this.textInputAction,
    this.onFieldSubmited});


  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _LoginVerticationCodeWidgetState();
  }

}
class _LoginVerticationCodeWidgetState extends State<LoginVerticationCodeWidget>{
  TextEditingController controller;
  ValueNotifier<bool> obscureNotifier;

  @override
  void initState() {
    controller=widget.controller??TextEditingController();
    obscureNotifier=ValueNotifier(widget.obscureText);
    super.initState();
  }

  @override
  void dispose() {
    obscureNotifier.dispose();
    if(widget.controller==null)
      controller.dispose();
    super.dispose();
  }
  @override
  Widget build(BuildContext context) {
    var theme = Theme.of(context);
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 8,vertical: 4),
      child: ValueListenableBuilder(
        valueListenable: obscureNotifier,
        builder: (context,value,child)=>

            Row(
              children: [
                TextFormField(
                  controller: controller,
                  obscureText: value,
                  validator: (text){
                    var validator=widget.validator??(_) => null;
                    return text.trim().length>0?
                    validator(text):S.of(context).fieldNotNull;
                  },
                  focusNode: widget.focusNode,
                  textInputAction: widget.textInputAction,
                  onFieldSubmitted: widget.onFieldSubmited,
                  decoration: InputDecoration(
                    prefixIcon:Icon(widget.icon,color: theme.accentColor,size: 22,),
                    hintText: widget.label,
                    hintStyle: TextStyle(fontSize: 16),
                    suffixIcon: LoginTextFieldSuffixIcon(
                      controller: controller,
                      obscureText: widget.obscureText,
                      obscureNotifier: obscureNotifier,
                    ),
                  ),
                ),
              ],
            ),



      ),
    );
  }

}